<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	html,body{
		margin:0;
		padding:0;
		width:100%;
		height:100%;
	}
	#syllabus_day{
    position:relative;
    height:100%;
    width:100%;
    overflow:hidden;
  }
  .inner{
  	position:absolute;
  	width:1000%;
  	height:100%;
  }
  .inner div{
    
   float:left;
    background: skyblue;
    height:100%;
    width:10%;
  }

  .Monday table{
    text-align: center;
    background: #ccc;
    width:100%;
    height:100%;
  }
	</style>
</head>
<body>
	<div id="syllabus_day" >
	<div class="inner">
    <div class="Monday " >
      <table border=1>
        <tr>
          <td colspan=2 align="center">时间</td>
          <td  align="center">星期一</td>
        </tr>
        <tr>
          <td colspan=2 align=center>早晨</td><td></td>
        </tr>

        <tr>
          <td  rowspan=4  align=center>上午</td>
          <td  >第1节</td>
          <td rowspan=2 align=center>WEB应用开发技术<br>周一第1,2节{第1-16周}
          <br>熊俊涛(熊俊涛)<br>3502</td>
        </tr>
        <tr>
         <td>第2节</td>
        </tr>
        <tr>
          <td >第3节</td>
          <td rowspan=2 align=center>WEB应用开发技术<br>周一第3,4节{第9-16周}
          <br>熊俊涛(熊俊涛)</td>
        </tr>
        <tr>
        <td >第4节</td>
        </tr>

        <tr>     
          <td  rowspan=4 align=center>下午</td>
          <td >第5节</td>
          <td rowspan=2 align=center></td>
          </tr>
          <tr>
          <td >第6节</td>
          </tr>
          <td >第7节</td>
          <td rowspan=2 align=center>马克思主义基本原理<br>周一第7,8节{第1-18周}<br>陈雷<br>3402</td>
          </tr>         
          <tr>
            <td >第8节</td>
          </tr>

          <tr>
            <td rowspan=4>晚上</td>
            <td >第9节</td>
            <td rowspan=2 align=center>管理统计学<br>周二第9,10节{第6-9周}<br>张建桃(张建桃)</td>
          </tr>
          <tr>
            <td>第10节</td>
          </tr>
          <tr>
            <td >第11节</td> 
            <td rowspan=2 align=center>管理统计学<br>周二第9,10节{第6-9周}<br>张建桃(张建桃)</td>
            <tr>
            <td >第12节</td> 
          </tr>
              

      </table>
    </div>
    <div class="Tuesday ">2</div>
    <div class="Wednesday ">3</div>
    <div class="Thursday ">4</div>
    <div class="Friday ">5</div>
    <div class="Saturday ">6</div>
    <div class="Sunday">7</div>
  </div>

  </div>
</body>
	<script>
		var syllabus_day = document.getElementById("syllabus_day");
		var inner = document.querySelector(".inner");
		var index = 0;
		var dx1 = 0;
		var dx2 = 0;
		var x1 = 0;
		var x2 = 0;
		var w = inner.children[0].offsetWidth;
		syllabus_day.addEventListener("touchstart",function(e){
				dx1 = e.touches[0].clientX;
				x1 = dx1;
				dx2 = dx1 - inner.offsetLeft;
				x2 = 0;

			document.addEventListener("touchmove",tmove,false)
			

		})
			
		function tmove(e){
			 x1 = e.touches[0].clientX 
			 x2 = x1 - dx2;
			 inner.style.left = x2 + "px";
		}	
			document.addEventListener("touchend",function(){
				document.removeEventListener("touchmove",tmove,false)
				var ddx = x1 - dx1;
				if(ddx<-80&&ddx>-w){
					index++;
					

				}else if(ddx>80&&ddx<w){
					index--;
					
				}
				else{
					 index = Math.round(inner.offsetLeft/w)
					
				}
				if(index>6){
						index=6
					}
				if(index<0){
						index=0
					}
				inner.style.left = -w*index +"px";
				
					
				
			})
		
		
	</script>
</html>